<template>
	<div>
		<!-- 标题区域 -->
		<van-nav-bar title="分类" fixed />
		<!-- 页面 排版 左右区域  -->
		<van-row>
			<van-col span="6">
				<!-- 左侧导航栏 -->
				<van-sidebar v-model="active">
					<van-sidebar-item v-for="item in classdata" :key="item" :title="item.cat_name" />
				</van-sidebar>
			</van-col>
			<!-- 右侧 内容区域 -->
			<van-col span="18">
				<!-- 标题渲染 -->
				<div v-for="item in classdata[active]?.children" :key="item">
					<h3>{{ item.cat_name }}</h3>
					<!-- 页面跳转到商品页 -->
					<router-link :to="`/goods/${item.cat_name}`">
						<!-- 宫格 -->
						<van-grid :column-num="4">
							<van-grid-item v-for="items in item.children" :key="items" :icon="items.cat_icon"
								:text="items.cat_name" />
						</van-grid>
					</router-link>
				</div>
			</van-col>
		</van-row>
	</div>
</template>
<script setup>
import { ref } from "vue";
import { categoriesApi } from "@/api/api";
let classdata = ref([])
// 拿商品分类数据
categoriesApi().then(res => {
	console.log('商品分类', res)
	classdata.value = res.data.message
})
let active = ref(0);
</script>

<style lang="scss" scoped></style>